<template>
  <div class="patientlist">
    <h1>患者药方表</h1>
    <div class="filter-container">
      <el-input v-model="listQuery" placeholder="请输入名字" style="width:195px;"></el-input>
      <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
      <el-button type="primary" icon="search" @click="getAllPatientlist">显示所有</el-button>
      <el-button type="primary" @click="handleDownload"><i class="el-icon-document el-icon--left"></i>导出</el-button>
    </div><br><br>
    <el-table :data="tableData" border style="width:100%;" @selection-change="handleSelectionChange">
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="主治医生" prop="doctor"></el-table-column>
      <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="建档日期" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.date }}</span>
            </el-form-item>
            <el-form-item label="患者姓名" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="患者来源" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.region }}</span>
            </el-form-item>
            <el-form-item label="身份证号" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.idCard }}</span>
            </el-form-item>
            <el-form-item label="患者年龄" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="患者性别" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.sex }}</span>
            </el-form-item>
            <el-form-item label="家庭地址" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="联系人姓名" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.familyName }}</span>
            </el-form-item>
            <el-form-item label="联系人号码" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="患者与联系人关系" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.relation }}</span>
            </el-form-item>
            <el-form-item label="病症" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.symptoms }}</span>
            </el-form-item>
            <el-form-item label="病史" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.illHistory }}</span>
            </el-form-item>
            <el-form-item label="科室" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.disease }}</span>
            </el-form-item>
            <el-form-item label="主治医生" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.doctor }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <hr>
    <br>


    <h1>住院患者表</h1>
    <div class="filter-container">
      <el-input v-model="listQuery1" placeholder="请输入名字" style="width:195px;"></el-input>
      <el-button type="primary" icon="search" @click="handleSearch1">搜索</el-button>
      <el-button type="primary" icon="search" @click="getAllPatientlist1">显示所有</el-button>
      <el-button type="primary" @click="handleDownload1"><i class="el-icon-document el-icon--left"></i>导出</el-button>
    </div><br><br>
    <el-table :data="tableData1" border style="width:100%;" @selection-change="handleSelectionChange1">
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="性别" prop="sex">
        <template slot-scope="scope">
          {{ scope.row.sex === 1 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="主治医生" prop="doctor"></el-table-column>
      <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="患者姓名" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="患者年龄" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.age }}</span>
            </el-form-item>
            <el-form-item label="患者性别" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.sex == 1 ? '男' : '女' }}</span> </el-form-item>
            <el-form-item label="联系人号码" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="身份证号" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.idcard }}</span>
            </el-form-item>
            <el-form-item label="地址" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.homeaddr }}</span>
            </el-form-item>
            <el-form-item label="主治医生" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.doctor }}</span>
            </el-form-item>
            <el-form-item label="护士" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.nurse }}</span>
            </el-form-item>
            <el-form-item label="病症" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.patientcond }}</span>
            </el-form-item>
            <el-form-item label="医生建议" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.txstatus }}</span>
            </el-form-item>
            <el-form-item label="患病原因" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.medstatus }}</span>
            </el-form-item>
            <el-form-item label="医生叮嘱" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.precautions }}</span>
            </el-form-item>
            <el-form-item label="住院开始时间" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.admtime }}</span>
            </el-form-item>
            <el-form-item label="住院结束时间" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.disctime }}</span>
            </el-form-item>
            <el-form-item label="住院地址" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.admaddr }}</span>
            </el-form-item>
            <el-form-item label="住院费用" style="width: 33%;margin-bottom: 0;margin-right: 0;font-size: 0;">
              <span>{{ props.row.hospcosts }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button type="text" size="small" @click="handleEdit1(scope.$index,scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete1(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑表单 -->
    <el-dialog title="编辑表单" :visible.sync="dialogFormEditVisible1">
      <el-form class="small-space" :model="Edit1" label-position="left" label-width="70px"
        style='width: 400px; margin-left:50px;'>
        <el-form-item label="患者姓名">
          <el-input v-model="Edit1.name"></el-input>
        </el-form-item>
        <el-form-item label="患者年龄">
          <el-input v-model="Edit1.age"></el-input>
        </el-form-item>
        <el-form-item label="患者性别">
          <el-input v-model="Edit1.sex"></el-input>
        </el-form-item>
        <el-form-item label="联系人号码">
          <el-input v-model="Edit1.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="Edit1.idcard"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="Edit1.homeaddr"></el-input>
        </el-form-item>
        <el-form-item label="主治医生">
          <el-input v-model="Edit1.doctor"></el-input>
        </el-form-item>
        <el-form-item label="护士">
          <el-input v-model="Edit1.nurse"></el-input>
        </el-form-item>
        <el-form-item label="病症">
          <el-input v-model="Edit1.patientcond"></el-input>
        </el-form-item>
        <el-form-item label="医生建议">
          <el-input v-model="Edit1.txstatus"></el-input>
        </el-form-item>
        <el-form-item label="患病原因">
          <el-input v-model="Edit1.medstatus"></el-input>
        </el-form-item>
        <el-form-item label="医生叮嘱">
          <el-input v-model="Edit1.precautions"></el-input>
        </el-form-item>
        <el-form-item label="住院开始时间">
          <el-input v-model="Edit1.admtime"></el-input>
        </el-form-item>
        <el-form-item label="住院结束时间">
          <el-input v-model="Edit1.disctime"></el-input>
        </el-form-item>
        <el-form-item label="住院地址">
          <el-input v-model="Edit1.admaddr"></el-input>
        </el-form-item>
        <el-form-item label="住院费用">
          <el-input v-model="Edit1.hospcosts"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEditVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit1">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑表单" :visible.sync="dialogFormEditVisible">
      <el-form class="small-space" :model="Edit" label-position="left" label-width="70px"
        style='width: 400px; margin-left:50px;'>
        <el-form-item label="建档日期">
          <el-input v-model="Edit.date"></el-input>
        </el-form-item>
        <el-form-item label="患者姓名">
          <el-input v-model="Edit.name"></el-input>
        </el-form-item>
        <el-form-item label="患者来源">
          <el-input v-model="Edit.region"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="Edit.idCard"></el-input>
        </el-form-item>
        <el-form-item label="患者年龄">
          <el-input v-model="Edit.age"></el-input>
        </el-form-item>
        <el-form-item label="患者性别">
          <el-input v-model="Edit.sex"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址">
          <el-input v-model="Edit.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="Edit.familyName"></el-input>
        </el-form-item>
        <el-form-item label="联系人号码">
          <el-input v-model="Edit.phone"></el-input>
        </el-form-item>
        <el-form-item label="患者与联系人关系">
          <el-input v-model="Edit.relation"></el-input>
        </el-form-item>
        <el-form-item label="病症">
          <el-input v-model="Edit.symptoms"></el-input>
        </el-form-item>
        <el-form-item label="病史">
          <el-input v-model="Edit.illHistory"></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="Edit.disease"></el-input>
        </el-form-item>
        <el-form-item label="主治医生">
          <el-input v-model="Edit.doctor"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script type="text/ecmascript-6">
  import {
    api
  } from '../../../global/api.js';
  import Vue from 'vue';
  export default {
    data() {
      return {
        tableData: [],//所有患者信息
        listQuery: '',//搜索患者关键字
        temp: {
          date: '',
          name: '',
          sex: '',
          age: '',
          doctor: ''
        },
        Edit: [],
        dialogFormEditVisible: false,
        dialogFormVisible: false,
        multipleSelection: [],

        tableData1: [],//所有住院患者信息
        listQuery1: '',//搜索住院患者关键字
        Edit1: [],
        dialogFormEditVisible1: false,
        dialogFormVisible1: false,
        multipleSelection1: [],
      };
    },
    created() {
      this.inio();
    },
    methods: {
      inio() { //查询所有数据
        let me = this;
        let apilogin = "http://localhost:8088/getAll"
        this.$http.get(apilogin).then(function(response) {
          console.log(response.body);
          me.tableData = response.body.data.patientlist;
          me.tableData1 = response.body.data.patienthosp;
          me.tableData2 = response.body.data.registered;
        }, function() {
          me.$message.error('数据获取失败!');
        });
      },
      handleSearch() { //条件查询
        let me = this;
        let apilogin = "http://localhost:8088/getName/" + me.listQuery
        this.$http.get(apilogin).then(function(response) {
          console.log(response.body);
          me.tableData = response.body.data.Patient;
        }, function() {
          me.$message.error('数据获取失败!');
        });
      },
      getAllPatientlist() {//重置
        this.listQuery = '';
        this.inio();
      },
      handleEdit(index, row) {//显示修改页面
        this.dialogFormEditVisible = true;
        console.log('选择的条数：', row.id, '选择row属性：', row);
        this.Edit = row; // 浅拷贝
      },
      handleEditSubmit() { //修改Patientlist
        let that = this;
        let apilogin = "http://localhost:8088/updatePatientlist"
        this.$http.post(apilogin, this.Edit).then(function(response) {
          console.log(response.body);
          that.$message.success('修改成功!');
        }, function() {
          that.$message.error('修改失败!');
        });
        this.dialogFormEditVisible = false;
      },
      handleDelete(index, row) { //删除Patientlist
        let that = this;
        let apilogin = "http://localhost:8088/deletePatientList"
        this.$http.post(apilogin, row.number).then(function(response) {
          console.log(response.body);
          that.$message.success('删除成功!');
          that.inio();
        }, function() {
          that.$message.error('删除失败!');
        });
      },
      handleSelectionChange(val) {//展开详情
        this.multipleSelection = val;
      },
      handleDownload() {//导出export表格
        var vm = this;
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('vendor/Export2Excel');
          const tHeader = ['日期', '名字', '性别', '地址', '联系号码', '年龄', '主治医生'];
          const filterVal = ['date', 'name', 'sex', 'address', 'phone', 'age', 'doctor'];
          const tableData = vm.tableData;
          const data = vm.formatJson(filterVal, tableData);
          export_json_to_excel(tHeader, data, '导出的列表excel');
        });
      },

      handleSearch1() { //条件查询
        let me = this;
        let apilogin = "http://localhost:8088/getPatienthospByName/" + me.listQuery1
        this.$http.get(apilogin).then(function(response) {
          console.log(response.body);
          me.tableData1 = response.body.data.list;
        }, function() {
          me.$message.error('数据获取失败!');
        });
      },
      getAllPatientlist1() {//住院患者编辑信息重置
        this.listQuery1 = '';
        this.inio();
      },
      handleEdit1(index, row) {//显示住院患者的修改页面
        this.dialogFormEditVisible1 = true;
        console.log('选择的条数：', row.id, '选择row属性：', row);
        this.Edit1 = row; // 浅拷贝
      },
      handleEditSubmit1() { //修改patienthosp
        let that = this;
        let apilogin = "http://localhost:8088/updatePatienthosp"
        this.$http.post(apilogin, this.Edit1).then(function(response) {
          console.log(response.body);
          that.$message.success('修改成功!');
        }, function() {
          that.$message.error('修改失败!');
        });
        this.dialogFormEditVisible1 = false;
      },
      handleDelete1(index, row) { //删除patienthosp
        let that = this;
        let apilogin = "http://localhost:8088/deletePatienthosp"
        this.$http.post(apilogin, row.id).then(function(response) {
          console.log(response.body);
          that.$message.success('删除成功!');
          that.inio();
        }, function() {
          that.$message.error('删除失败!');
        });
      },
      handleSelectionChange1(val) {//住院患者展开详情
        this.multipleSelection1 = val;
      },
      handleDownload1() {//导出住院患者export表格
        var vm = this;
        require.ensure([], () => {
          const {
            export_json_to_excel
          } = require('vendor/Export2Excel');
          const tHeader = ['名字', '年龄', '性别', '联系号码', '身份证', '地址', '主治医生', '护士', '病症', '医生建议', '患病原因', '医生叮嘱',
            '住院开始时间', '住院结束时间', '住院地址', '住院费用'
          ];
          const filterVal = ['name', 'age', 'sex', 'phone', 'idcard', 'homeaddr', 'doctor', 'nurse', 'patientcond',
            'txstatus', 'medstatus', 'precautions', 'admtime', 'disctime', 'admaddr', 'hospcosts'
          ];
          const tableData = vm.tableData1;
          const data = vm.formatJson(filterVal, tableData);
          export_json_to_excel(tHeader, data, '导出的列表excel');
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      }
    }
  };
</script>
<style type="text/css">
  .hasPatient .demo-table-expand {
    font-size: 0;
  }

  .hasPatient .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .hasPatient .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 33%;
  }
</style>
